<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Shopping list example 购物清单</title>
    <style>
        li {
        margin-bottom: 10px;
      }
      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
    </style>
</head>

<body>
    <h1>My shopping list 我的购物清单</h1>
    <div>
        <label for="item">Enter a new item输入新项目:</label>
        <input type="text" name="item" id="item">
        <button>Add item添加物品</button>
    </div>
    <ul>
    </ul>
    <script>
    var list = document.querySelector('ul');
    var input = document.querySelector('input');
    var button = document.querySelector('button');

    button.onclick = function() {
        var myItem = input.value;
        input.value = '';

        var li = document.createElement('li');
        var span = document.createElement('span');
        var Btn = document.createElement('button');

        li.appendChild(span);
        span.textContent = myItem;
        li.appendChild(Btn);
        Btn.textContent = 'Delete删除';
        list.appendChild(li);
        Btn.onclick = function() {
            list.removeChild(li);
        }
        input.focus();



    }
    </script>
</body>

</html>